<template>
  <div>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '../mixins/resize'
import { mapGetters } from 'vuex'
import { modelData } from '@/api/modelData'
// import { upFixed, downFixed } from '@/utils'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    
    // ids: {
    //   type: String | Number,
    //   required: true
    // },
    // id_index: {
    //   type: Array,
    //   default: () => {
    //     return []
    //   }
    // }
  },
  data() {
    return {
      chart: null,
      startTime: '',
      endTime: '',
      xDate: [], // y轴
      fitNetWorth_obj: {}, // 拟合
      netWorth_obj: {}, // 净值
    }
  },
  computed: {
    ...mapGetters(['index_dict'])
  },
  mounted() {
    console.log(666,'modelData', modelData)
    this.xDate = modelData.map(item => item.date)
    const data = modelData.map(item => item.index_value)
    this.initChart(data)
  },
  watch: {
    // ids: {
    //   handler(id) {
    //     if(id) {
    //       Promise.all([this.getFitNetWorthValue(id), this.getNetWorthByInvestId(id)]).then(res => {
    //         console.log('曲线:', res)
    //         this.startTime = res[0][0].networthTime
    //         this.endTime = res[0][res[0].length-1].networthTime
    //         this.fitNetWorth_obj['拟合'] = []
    //         res[0].forEach(item => {
    //           this.xDate.push(item.networthTime)
    //           this.fitNetWorth_obj['拟合'].push(item.networthValue)
    //         })
    //         res[1].body.forEach(items => {
    //           const key = Object.keys(items)[0]
    //           this.netWorth_obj[key] = items[key]&&Array.isArray(items[key])&&items[key].map(item => item.networthValue) || []
    //         })
            
    //         this.$nextTick(() => {
    //           this.chart && this.chart.dispose()
    //           this.initChart(this.fitNetWorth_obj, this.netWorth_obj)
    //         })
    //       })
    //     }
    //   },
    //   deep: true,
    //   immediate: true
    // },
    // id_index: {
    //   handler(id) {
    //     if(this.startTime&&this.endTime) {
    //       this.findIndexByIndexTypeAndIndexTime(this.startTime, this.endTime, id)
    //     }else {
    //       setTimeout(() => {
    //         this.findIndexByIndexTypeAndIndexTime(this.startTime, this.endTime, id)
    //       }, 500)
    //     }
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(obj1) {
      this.chart = echarts.init(document.getElementById(this.id))

      const color_list = ['rgba(225,103,86,1)', 'rgba(129,183,236,1)', 'rgba(238,203,87,1)', 'rgba(173,224,255,1)', 'rgba(255,155,203,1)'] //todo 颜色 
      // const color_list_a = ['rgba(225,103,86,0.2)', 'rgba(129,183,236,0.2)', 'rgba(238,203,87,0.2)', 'rgba(173,224,255,0.2)', 'rgba(255,155,203,0.2)'] //todo 颜色
      const series_obj1 = [
        {
          name: '数据',
          type: 'line',
          symbolSize: 2,
          symbol: 'emptyCircle',
          showSymbol: false,
          lineStyle: {
            width: 1.6
          },
          itemStyle: {
            color: color_list[0]
          },
          data: obj1
        }
      ]

      // if(Object.keys(obj1).length) {
      //   Object.keys(obj1).forEach((key, i) => {
      //     const item = obj1[key]
      //     series_obj1.push({
      //       name: key,
      //       type: 'line',
      //       symbolSize: 2,
      //       symbol: 'emptyCircle',
      //       showSymbol: false,
      //       lineStyle: {
      //         width: 1.6
      //       },
      //       itemStyle: {
      //         color: color_list[i]
      //       },
      //       data: item
      //     })
      //   })
      // }

      console.log('series_obj1', series_obj1)

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            textStyle: {
              color: '#fff'
            }
          },
          formatter(params) {
            let str = ''
            str += `<div style="padding-bottom: 2px;">${params[0].name}</div>`
            for (let i = 0; i < params.length; i += 1) {
              str += `<div style="display: flex;align-items: center;">
                    ${params[i].marker} 
                    <span style="flex:1;">${params[i].seriesName}</span> 
                    <span style="margin-left: 10px;font-weight: bold;"> ${params[i].data}${(typeof params[i].data)=='number' ? '%' : ''}</span>
                    </div>`
            }
            return str
          }
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '10%',
          bottom: '15%',
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          x: '6%',
          top: '2%',
          textStyle: {
            color: '#90979c'
          },
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          boundaryGap: false, // 折线从x轴起始开始走
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
            interval: 'auto'
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            interval: 'auto'
          },
          data: this.xDate,
        }],
        yAxis: [
          {
            type: 'value',
            // min: function(value) {
            //   const num = value.min - (value.max - value.min)/5
            //   return downFixed(num, 1)
            // },
            // max: function(value) {
            //   const num = value.max + (value.max - value.min)/5
            //   return upFixed(num, 1)
            // },
            splitNumber: 5,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#90979c'
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              formatter: function(value) {
                return value.toFixed(4)
              }
            },
            splitArea: {
              show: false
            }
          }
        ],
        dataZoom: [{
          type: 'slider',
          show: false,
          start: 0,
          end: 100
        }, {
          show: false,
          start: 0,
          end: 100,
          realtime: true,
          height: '6%',
          bottom: '8%',
        }],
        series: series_obj1
      })
    }
  }
}
</script>
